<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		1. 全局安装react脚手架
		npm install -g create-react-app
		
		2.检验是否安装成功
		create-react-app --version
		
		3.创建react 项目
		create-react-app 项目名称（不能是大写字母和汉字）
		
		npm start 启动项目
		npm run build 打包
		npm test 开启测试
		npm run eject 向外暴露webpack
		
		mvc框架  渐进式框架
		react react-dom  开发pc端页面
		react react-native 开发移动端	
		redux react-redux(相当于vuex)-->dva---》umi
		react-router-dom 路由
		
		没有一个很好的移动端框架 antd
		
		react支持css,但是不支持less,
		需要暴露webpack,在webpack里面自动配置支持
		
		暴露之前有个要求：必须先把项目保存到git上一份，才能暴露（提交本地）
		
		先把自己文件夹变成 .git 文件夹（git init）
		git add .
		git commit -m "xxx"
		
		1. 修改端口号 
		
		方法1：scripts/start.js（开发环境）
		const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8000;
		
        方法2：
		下载 npm install cross-env -D
		package.json 修改
		
		"scripts": {
		  "start": "cross-env PORT=8080 node scripts/start.js",
		  "build": "node scripts/build.js",
		  "test": "node scripts/test.js"
		},
		
		2. 修改域名
		
	    scripts/start.js（开发环境）
		const HOST = process.env.HOST || '127.0.0.1';
		
		3. 修改协议
		scripts/start.js（开发环境）
		const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
		
		4. 支持less
		安装less
		npm install less@4.1.1 less-loader@7 --save-dev

		修改 config 文件夹---》webpack.config.js文件（三处）
		
		5.react跨域
		5.1 只支持一个源跨域
		完整路径：https://news-at.zhihu.com/api/4/news/latest

		package.json 在最后添加
		"proxy":"https://news-at.zhihu.com"

		index.js 文件中
		fetch("/api/4/news/latest")
		.then(res=>{
		return res.json()
		}).then(value=>{
		console.log(value);
		}).catch(err=>{
		console.log(err);
		})

		保证路径的完整性

		重新启动项目（修改配置一定要重新启动项目）

		5.2 支持多源跨域

		1.下载插件
		npm i http-proxy-middleware --save

        2.在src目录里新建一个文件 setupProxy.js（必须这个名字）

		3. 在setupProxy.js添加代码
		const {createProxyMiddleware}=require("http-proxy-middleware");

		module.exports=function(app){
			//使用中间件
			app.use(createProxyMiddleware("/zhihu",{
				target:"https://news-at.zhihu.com",//跨域的网址
				changeOrigin:true,//伪装访问的源
				pathRewrite:{//重写接口路由
					"/zhihu":""
				}
			}))

			app.use(createProxyMiddleware("/jianshu",{
				target:"https://www.jianshu.com",
				changeOrigin:true,
				pathRewrite:{
					"/jianshu":""
				}
			}))

		}

		index.js
		
		fetch("/zhihu/api/4/news/latest")
		.then(res=>{
		return res.json()
		}).then(value=>{
		console.log(value);
		}).catch(err=>{
		console.log(err);
		})

		fetch("/jianshu/asimov/subscriptions/recommended_collections")
		.then(res=>{
		return res.json()
		}).then(value=>{
		console.log(value);
		}).catch(err=>{
		console.log(err);
		})
	</body>
</html>
